<template>
	<view class="x-homeTitle x-flex-column-center2">
		<view class="x-statusBar"></view>
		<!-- #ifdef MP-WEIXIN -->
		<view class="title" :style="{...menuButtonInfo}">
			{{props.title}}
		</view>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN -->
		<view class="title">
			{{props.title}}
		</view>
		<!-- #endif -->
		<view class="serchArea x-flex-row-between-center">
			<view class="left">
				<slot name="left"></slot>
			</view>
			<view class="center">
				<slot name="center"></slot>
			</view>
			<view class="right">
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script setup>

	import {
		onMounted,
		reactive
	} from "vue";

	const props = defineProps({title:{
		type:String,
		required:true
	}})

	// #ifdef MP-WEIXIN
	// 当为微信时，title和胶囊框不在同一条线上
	const menuButtonInfo = reactive({})
	onMounted(() => {
		let menuButton = uni.getMenuButtonBoundingClientRect()
		menuButtonInfo.position = 'absolute'
		menuButtonInfo.height = menuButton.height + 'px'
		menuButtonInfo.lineHeight = menuButton.height + 'px'
		menuButtonInfo.paddingTop = 0
		menuButtonInfo.top = menuButton.top + 'px'
		menuButtonInfo.left = '50%'
		menuButtonInfo.transform = 'translateX(-50%)'
	})
	// #endif
</script>

<style lang="scss" scoped>
	.x-homeTitle {
		
		position: sticky;
		left: 0;
		top: 0;
		width: 100vw;
		// 这高度要进行处理
		height: 240rpx;
		/* #ifdef H5 */
		height: calc(240rpx - 45px);
		/* #endif */
		background: #486AEF;
		color: #fff;
		z-index: 88888;
		
		.title {
			padding-top: 20rpx;
			font-size: 34rpx;
			font-weight: 500;
			color: #FFFFFF;
			// line-height: 44rpx;
		}

		.serchArea {
			position: absolute;
			bottom: -50rpx;
			width: 750rpx;
			height: 104rpx;
			background: #FFFFFF;
			border-radius: 24rpx;
			padding: 0 24rpx;
			box-sizing: border-box;
			color: #333333;

			.left {}

			.center {}

			.right {}
		}
	}
</style>